<template>
  <div class="custom-tree-container">

    <el-row>
      <el-col :span="12">
        <!--        left ==================================== -->
        <div class="block" style="padding-top: 30px;">
          <div align="center">
            <font color="#4682b4" size="5"><B>普通商城类目</B></font>
          </div>
          <!--水平分割线-->
          <el-divider />
          <el-tree :data="agentData" default-expand-all :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span class="block">
                <el-button v-if="data.parentId == '-1'" type="info" size="small" @click="() => append('-1',inputType.common)">
                  添加同级菜单
                </el-button>
                <el-button v-if="data.parentId == '-1'" type="primary" size="small" @click="() => append(data.id,inputType.common)">
                  添加子级菜单
                </el-button>
                <el-button type="warning" size="small" @click="() => updatel(data,inputType.common)">
                  编辑
                </el-button>
                <el-button type="danger" size="small" @click="() => remove(node, data,inputType.common)">
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>

      </el-col>
      <!-- <el-col :span="1">
        <el-divider direction="vertical" />
      </el-col> -->

      <!-- <el-col :span="11">
        <div class="block" style="padding-top: 30px;">
          <div align="center">
            <font color="#daa520" size="5"><b>兼职商城类目</b></font>
          </div>
          <el-divider />
          <el-tree :data="commonData" default-expand-all :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span class="block">
                <el-button v-if="data.parentId == '-1'" type="info" size="small" @click="() => append('-1',inputType.agent)">
                  添加同级菜单
                </el-button>
                <el-button v-if="data.parentId == '-1'" type="primary" size="small" @click="() => append(data,inputType.agent)">
                  添加子级菜单
                </el-button>
                <el-button type="warning" size="small" @click="() => updatel(data,inputType.agent)">
                  编辑
                </el-button>
                <el-button type="danger" size="small" @click="() => remove(node, data,inputType.agent)">
                  删除
                </el-button>
              </span>

            </span>
          </el-tree>
        </div>
      </el-col> -->
    </el-row>

    <!-- 添加/编辑菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="菜单名称" prop="categoryName">
          <el-input v-model="form.categoryName" placeholder="请输入菜单名称" />
        </el-form-item>

        <el-form-item label="类目封面" prop="bannerShow">
          <el-upload ref="upload" class="avatar-uploader" :action="fileUrl" :show-file-list="false" :on-success="successFile" :before-upload="beforeAvatarUpload">
            <img v-if="form.categoryIcon" :src="form.categoryIcon" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listCategory,
  getCategory,
  delCategory,
  addCategory,
  updateCategory,
  exportCategory
} from "@/api/admin/spucate";
import { fileUrl } from "@/constant/constant"

const inputType = {
  agent: 1,
  common: 0
}

Object.freeze(inputType)

export default {
  name: "Category",
  data() {
    return {
      fileUrl: "",
      inputType,
      agentData: [],
      commonData: [],
      data: [],
      // 遮罩层
      loading: true,
      parentId: '',
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 菜单表格数据
      categoryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        categoryName: null,
        parentId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        categoryName: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ],

        parentId: [
          { required: true, message: "上级菜单不能为空", trigger: "blur" }
        ],

      }
    };
  },
  created() {
    this.fileUrl = fileUrl;
    this.getList();
  },
  methods: {
    test(type) {
      this.form.type = type;
    },
    /** 图片上传路径 */
    successFile(res, file) {
      this.form.categoryIcon = URL.createObjectURL(file.raw);
      this.form.categoryIcon = res.data;
      this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    /**
     * 新增菜单
     */
    append(data, type) {
      this.getList();
      this.commonData = type[1];
      this.agentData = type[0];
      this.reset()
      this.form.type = type;
      this.parentId = data;
      this.open = true
    },
    /**
     * 修改菜单
     */
    updatel(data, type) {
      this.getList();
      this.commonData = type[1];
      this.agentData = type[0];
      this.form.type = type;
      getCategory(data.id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "请输入菜单名称";
      });
    },
    /**
     * 删除菜单
     */
    remove(node, data, type) {
      this.getList();
      this.commonData = type[1];
      this.agentData = type[0];
      this.form.type = type;

      this.$confirm('是否确认删除菜单"' + data.categoryName + '"?', "警告", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning"
      }).then(function () {
        return delCategory(data.id);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      listCategory(this.queryParams).then(response => {
        this.commonData = response[1];
        this.agentData = response[0];
        this.loading = false;
      });
    },
    /** 获取代理数据 */
    readAgentData() {
      const params = { ...this.queryParams };
      params.type = inputType.agent;
      return listCategory(params)
    },
    /** 获取普通数据 */
    readCommonData() {
      const params = { ...this.queryParams };
      params.type = inputType.common;
      return listCategory(params)
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,

        categoryName: null,

        parentId: null,

        createBy: null,

        createTime: null,

        updateBy: null,

        updateTime: null,

        type: null,

      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {

      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.form.parentId = this.parentId;
            updateCategory(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.form.parentId = this.parentId;
            addCategory(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  }
};
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px; /*文字大小*/
  padding-right: 8px;
}

.el-tree-node__content {
  padding: 5px;
  height: auto;
}

/*.el-divider--vertical {
  display:inline-block;
  width:1px;
  height:100%;		!*更改竖向分割线长度*!
  margin:0 8px;
  vertical-align:middle;
  position:relative;
}*/
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 57em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
